<template>
	<view>
		<view class="top">
			{{weather.province+'省 '+weather.city}}
		</view>
		<view class="bottom">
			<view class="tmp">
				<view class="tmpNum">
					{{todayWeather.daytemp+'°'}}
				</view>
				<view class="tmpInfo">
					<view class="weather">
						今日{{todayWeather.dayweather}}
						当前{{todayWeather.daywind}}风
					</view>
					<view class="reportTime">
						{{weather.reporttime}}
					</view>
				</view>
			</view>
			<view class="forcasts">
				<scroll-view scroll-x="true" >
					<view class="item" v-for="(item,index) in weatherList" :key="item.date">
						<view class="itemWeek">
							{{item.week}}
						</view>
						<view class="itemDate">
							{{item.date}}
						</view>
						<view class="itemDate">
							{{item.dayweather}}
						</view>						
						<view class="itemTmp">
							{{item.daytemp+'°'}}
						</view>
					</view>
				</scroll-view>
			</view>
			
		</view>
		<view class="mapContainer">
			<view class="info">
				<view class="left">
					<view class="localInfo">
						地址：杭州市-上城区-天阳·观筑
					</view>
					<view class="contact">
						Tel：13588411834
					</view>
				</view>
				<view class="right">
					<view class="botton" @click="callPhone">
						联系我们
					</view>
				</view>
			</view>

			<map class="map" 
				scale="15"
				:latitude="map.latitude" 
				:longitude="map.longitude" 
				:markers="map.markers">
			</map>
		</view>
	</view>
</template>

<script>
	import amap from '../../lib/gaoDeMap/amap-wx.130.js'
	export default {
		data() {
			return {
				weather:{},
				todayWeather:{},
				weatherList:[],
				map:{
					amapPlug: null,
					key: 'c081777188e039e9d5e3e39cc0f73a7b',
					latitude: 30.365289,
					longitude: 120.242889,
					markers: [{
						latitude:30.365289,
						longitude:120.242889,
						iconPath: '../../static/Icon/locationWeather/community.png',
						width:30,
						height:30,
						title:'天阳·观筑',
						label: {
							content:'天阳·观筑'
						},
						callout:{
							content:'天阳·观筑位于杭州江干区丁桥大型居住区核心',
							padding: 20,
							borderRadius:30,
							display: 'ALWAYS'
						}
					}]
				}
			};
		},
		onLoad() {
			this.getWeather()
			this.map.amapPlug = new amap.AMapWX({
				// key: this.map.key
			})
			// console.log(this.map.amapPlug)
		},
		methods:{
			callPhone(){
				uni.makePhoneCall({
					phoneNumber: '13588411834'
				})
			},
			formatWeatherList(){
				for(var i = 0;i < this.weatherList.length ;i++){
					this.weatherList[i].date = this.weatherList[i].date.slice(5)
					switch(this.weatherList[i].week){
						case "1":
							this.weatherList[i].week = '周一'
							break
						case "2":
							this.weatherList[i].week = '周二'
							break	
						case "3":
							this.weatherList[i].week = '周三'
							break
						case "4":
							this.weatherList[i].week = '周四'
							break	
						case "5":
							this.weatherList[i].week = '周五'
							break
						case "6":
							this.weatherList[i].week = '周六'
							break	
						case "7":
							this.weatherList[i].week = '周日'
							break		
					}
					if(i == 0){
						this.weatherList[i].week = '今天'
					}
					if(i == 1){
						this.weatherList[i].week = '明天'
					}
				}
			},
			getWeather(){
				uni.request({
					url:`https://restapi.amap.com/v3/weather/weatherInfo?key=b0d98e56d4a6b3f18ac8125f68e69242&city=330102&extensions=all`,
					success: (res) => {
						this.weather = res.data.forecasts[0]
						this.todayWeather = res.data.forecasts[0].casts[0]
						this.weatherList = res.data.forecasts[0].casts
						this.formatWeatherList()
						// console.log(this.weather)
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.top{
		padding: 20rpx 40rpx;
		font-size: 40rpx;
		font-weight: bold;
	}
	.bottom{
		padding: 20rpx 40rpx;
		width: 670rpx;
		view{
			// border: 1px solid red;
		}
		.tmp{
			display: flex;
			flex-wrap: wrap;
			padding-bottom: 40rpx;
			.tmpNum{
				height: 200rpx;
				font-size: 175rpx;
				line-height: 200rpx;
			}
			.tmpInfo{
				padding-top: 80rpx;
				// margin-left: -50rpx;
				.weather{
					font-size: 30rpx;
				}
				.reportTime{
					margin-top: 10rpx;
					color: $main-garyB;
					font-size: 30rpx;
				}
			}
		}
		.forcasts{
			// border: 1px solid red;
			// height: 200rpx;
			border-radius: 20rpx;
			// border: 1px solid $main-garyB;
			box-shadow: 0rpx 0rpx 10rpx 5rpx #e8e8ea;
			padding: 20rpx;
			scroll-view{
				white-space: nowrap;
				.item:nth-child(1){
					background-color: $main-garyA;
				}
				.item{
					display: inline-block;
					width: 170rpx;
					border-radius: 20rpx;
					margin-right: 20rpx;
					height: 100%;
					// border: 1px solid red;
					padding: 20rpx 0;
					text-align: center;
					.itemWeek{
						font-size: 35rpx;
						margin-bottom: 10rpx;
					}
					.itemDate{
						font-size: 30rpx;
						color: $main-garyB;
						margin-bottom: 10rpx;
					}
					.itemTmp{
						color: $main-colorA;
					}
				}
			}
		}
	}
	.mapContainer{
		// border: 1px solid red;
		padding: 20rpx 40rpx;
		height: 800rpx;
		view{
			// border: 1px solid red;
		}
		.info{
			margin-bottom: 40rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			border-bottom: 2rpx solid #e8e8ea;
			padding-bottom: 30rpx;
			.left{
				width: 450rpx;
				.localInfo{
					margin-bottom: 10rpx;
					font-size: 30rpx;
				}
				.contact{
					font-size: 30rpx;
				}
			}
			.right{
				width: 200rpx;
				display: flex;
				align-items: center;
				.botton{
					height: 70rpx;
					width: 170rpx;
					border-radius: 10rpx;
					background-color: $main-colorC;
					color: white;
					margin-left: 30rpx;
					text-align: center;
					line-height: 70rpx;
				}
			}
		}

		map{
			width: 670rpx;
			height: 500rpx;
			border-radius: 20rpx;
			box-shadow: 0rpx 0rpx 10rpx 5rpx #e8e8ea;
			// border: 1px solid red;
			overflow: hidden;
		}
	}
</style>
